<!DOCTYPE html>
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>客户关系管理</title>
<jsp:include page="/common/commonCss.jsp" />
<jsp:include page="/common/commonJs.jsp" />
<script type="text/javascript" src="${basePath }commonJs/tags/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="${basePath }commonJs/fusionCharts/FusionCharts.js"></script>
<script type="text/javascript">

	function initDate(){
		var sysdate = new Date();
		var strMonth = sysdate.getMonth() + 1;
		var strDay = sysdate.getDate();
		datastr = sysdate.getFullYear() + "/" + (strMonth < 10 ? "0" + strMonth : strMonth) + "/" + (strDay < 10 ? "0" + strDay : strDay);
		$("#intimeTo").val(datastr);

		sysdate.setMonth(sysdate.getMonth() -1);
		sysdate.setDate(sysdate.getDate() +1);
		strMonth = sysdate.getMonth() + 1;
		strDay = sysdate.getDate();
		datastr = sysdate.getFullYear() + "/" + (strMonth < 10 ? "0" + strMonth : strMonth) + "/" + (strDay < 10 ? "0" + strDay : strDay);
		$("#intimeFrom").val(datastr);
	}

	function initTable(formId, tableId, footId, callback) {
		var form = $("#" + formId);
		var pagebean = new PageBean(form);
		pagebean.setTableId(tableId);
		pagebean.setFootId(footId);
		pagebean.setCallback(callback);
		setPagebeanObj(pagebean);
		pagebean.doPage();
	}
	
	function searchLiveness() {
		initTable("frmLiveness","tbl1","foot1", function(data) {
			trimJsonArray(data);
			$.each(data, function(index, item) {
				var tr = '<tr>';
				tr += '<td class="lv"><a href="#">' + item.pkMemId + '</a></td>';
				tr += '<td>' + item.liveness + '</td>';
				tr += '<td>' + item.inTime + '</td>';
				tr += '<td>' + item.status + '</td>';
				tr += '<td>' + item.memName + '</td>';
				tr += '<td>' + item.sex + '</td>';
				tr += '<td>' + item.age + '</td>';
				tr += '<td>' + item.countryDesc + '</td>';
				tr += '<td>' + item.isVip + '</td>';
				tr += '<td>' + item.memberCardName + '</td>';
				tr += '<td>' + item.validDate + '</td>';
				tr += '</tr>';
				$("#tbl1").append(tr);
			});
		});
	}
	
	function searchBlack() {
		initTable("frmBlackList","tbl2","foot2", function(data) {
			trimJsonArray(data);
			$.each(data, function(index, item) {
				//会员,姓名,是否会员,性别,年龄,国籍,VIP,设置时间,设置人,原因
				//  是否会员 1：会员 2：非会员 3：访客
				var isMember = true;
				var url = "";
				if (item.memType == "1") {
					isMember = "是";
					url = "${basePath}filemanagement/getVipUserDetail.shtml?memberId=" + item.pkMemId +"&type=1&hisType=";
				} else if (item.memType == "2") {
					isMember = "否";
					url = "${basePath}filemanagement/getVipUserDetail.shtml?memberId=" + item.pkMemId +"&type=2&hisType=";
				} else if (item.memType == "3") {
					isMember = "否";
					url = "${basePath}filemanagement/getVipUserDetail.shtml?memberId=" + item.pkMemId +"&type=3&hisType=";
				}
				var tr = '<tr>';
				tr += '<td><input type="checkbox" name="memberId" value="' + item.pkMemId + '"></td>';
				tr += '<td class="lv"><a href="' + url + '">' + item.pkMemId + '</a></td>';
				tr += '<td>' + item.memName + '</td>';
				tr += '<td>' + isMember + '</td>';
				tr += '<td>' + item.sex + '</td>';
				tr += '<td>' + item.age + '</td>';
				tr += '<td>' + item.countryDesc + '</td>';
				tr += '<td>' + (item.isVip == '1' ? '是' : '否') + '</td>';
				tr += '<td>' + item.setTime + '</td>';
				tr += '<td>' + item.setUserName + '</td>';
				if (item.blackReason.length > 40) {
					tr += '<td title="' + item.blackReason + '">' + item.blackReason.substring(0, 40) + '...</td>';
				} else {
					tr += '<td title="' + item.blackReason + '">' + item.blackReason + '</td>';
				}
				tr += '</tr>';
				$("#tbl2").append(tr);
			});
		});
	}
	
	function searchVip() {
		initTable("frmVip","tbl3","foot3", function(data) {
			trimJsonArray(data);
			$.each(data, function(index, item) {
				// 会员,会员状态,姓名,性别,年龄,国籍,VIP,会员类型,有效期限
				var tr = '<tr>';									
				tr += '<td class="lv"><a href="#">' + item.pkMemId + '</a></td>';
				tr += '<td>' + item.status + '</td>';
				tr += '<td>' + item.memName + '</td>';
				tr += '<td>' + item.sex + '</td>';
				tr += '<td>' + item.age + '</td>';
				tr += '<td>' + item.countryDesc + '</td>';
				tr += '<td>' + item.isVip + '</td>';
				tr += '<td>' + item.memberCardName + '</td>';
				tr += '<td>' + item.validDate + '</td>';
				tr += '</tr>';
				$("#tbl3").append(tr);
			});
		});
	}
	
	function searchTotal() {
		$("#hide_loading").show();
		$.ajax({
			cache : false,
			type : "post",
			dataType : "json",
			url : "${basePath}crm/searchTotal.shtml",
			data : $("#frmTotal").serialize(),
			error : function(XMLHttpRequest) {
				ajaxError(XMLHttpRequest);
			},
			success : function(data) {
				$("#tbl4").find("tr").remove();
				var thead = '<tr>';
				if  ($("#chkCountry").attr("checked")) {
					thead += '<th>国籍</th>';
				}
				if  ($("#chkAge").attr("checked")) {
					thead += '<th>年龄</th>';
				}
				if  ($("#chkSex").attr("checked")) {
					thead += '<th>性别</th>';
				}
				// 未选=所有
				if (thead == '<tr>') {
					thead += ' <th>国籍</th><th>年龄</th><th>性别</th>';
				}
				thead += '<th>会员数量</th>';
				thead += '<th>百分比</th>';
				thead += '</tr>';
				$("#tbl4").append(thead);
				
				var country = null, age = null, sex = null;
				var countryCnt = 0, ageCnt = 0, sexCnt = 0;
				var total = 0;
				var map = new HashMap();
				$.each(data, function(index, item) {
					total += parseInt(item.memberCount);
				});
				$.each(data, function(index, item) {
					// 国籍,年龄,性别,会员数量,百分比
					var tr = '<tr>';
					if  ($("#chkCountry").attr("checked")) {
						if (country == item.countryDesc) {
							countryCnt += parseInt(item.memberCount);
							map.put(country, countryCnt);
							tr += '<td></td>';
						} else {
							country = item.countryDesc;
							tr += '<td>' + item.countryDesc + '</td>';
							countryCnt = parseInt(item.memberCount);
							map.put(country, parseInt(item.memberCount));
						}
					}
					if  ($("#chkAge").attr("checked")) {
						if (age == item.agePage) {
							if (!$("#chkCountry").attr("checked")) {
								ageCnt += parseInt(item.memberCount);
								map.put(age + "岁", ageCnt);
							}
							tr += '<td></td>';
						} else {
							age = item.agePage;
							tr += '<td>' + item.agePage + '</td>';
							if (!$("#chkCountry").attr("checked")) {
								ageCnt = parseInt(item.memberCount);
								map.put(age + "岁", parseInt(item.memberCount));
							}
						}
					}
					if  ($("#chkSex").attr("checked")) {
						if (sex == item.sex) {
							if (!$("#chkCountry").attr("checked") && !$("#chkAge").attr("checked")) {
								sexCnt += parseInt(item.memberCount);
								map.put(sex, sexCnt);
							}
							tr += '<td>' + item.sex + '</td>';
						} else {
							sex = item.sex;
							tr += '<td>' + item.sex + '</td>';
							if (!$("#chkCountry").attr("checked") && !$("#chkAge").attr("checked")) {
								sexCnt = parseInt(item.memberCount);
								map.put(sex, parseInt(item.memberCount));
							}
						}
					}
					// 未选=所有
					if (tr ==  '<tr>') {

						if (country == item.countryDesc) {
							countryCnt += parseInt(item.memberCount);
							map.put(country, countryCnt);
							tr += '<td></td>';
						} else {
							if (country != null) {
								//dataXml += '<set label="' + country + '" value="' + countryCnt + '" />';
								countryCnt = 0;
							} else {
								countryCnt += parseInt(item.memberCount);
							}
							country = item.countryDesc;
							tr += '<td>' + item.countryDesc + '</td>';
							countryCnt = parseInt(item.memberCount);
							map.put(country, parseInt(item.memberCount));
						}
						if (age == item.agePage) {
							tr += '<td></td>';
						} else {
							age = item.agePage;
							tr += '<td>' + item.agePage + '</td>';
						}
						tr += '<td>' + item.sex + '</td>';
					}
					tr += '<td>' + item.memberCount + '</td>';
					tr += '<td>' + (Math.round(item.memberCount/total * 10000) / 100.00 + '%') + '</td>';
					tr += '</tr>';
					$("#tbl4").append(tr);
				});
				
				var dataXml = '<chart palette="4" decimals="2" enableSmartLabels="1" enableRotation="0" bgColor="99CCFF,FFFFFF" bgAlpha="40,100" bgRatio="0,100" bgAngle="360" showBorder="1" startingAngle="70" baseFont="Arial" baseFontSize="12" caption="客户统计" xAxisName="用户" showFCMenuItem="0">';
				var keys = map.keys();
				for (var i = 0; i < keys.length; i++) {
					if (keys[i] == null) continue;
					dataXml += '<set label="' + keys[i] + '" value="' + map.get(keys[i]) + '" />';
				}
				dataXml += '</chart>';
				var myChart = new FusionCharts("${basePath }commonJs/fusionCharts/Pie3D.swf", "myChartId", "600", "300");
				
				myChart.setXMLData(dataXml);
				myChart.render("chartdiv");
				$("#hide_loading").hide();
			}
		});
	}
	
	$(document).ready(function() {
		refreshSelect();
		initDate();
		searchLiveness();
		searchBlack();
		searchVip();
		searchTotal();
		
		$("#btnSearchLiveness").click(function() {
			searchLiveness();
		});
		
		$("#btnSearchBlack").click(function() {
			searchBlack();
		});
		
		$("#btnSearchVip").click(function() {
			searchVip();
		});
		
		$("#btnSearchTotal").click(function() {
			searchTotal();
		});
		
		$("#chkAll").click(function() {
			var checked = false;
			if ($("#chkAll").attr("checked")) {
				checked = true;
			}
			
			$.each($("[name=memberId]"), function(index, item) {
				$(item).attr("checked", checked);
			});
			
		});
		
		$("#btnCancelBlack").click(function() {
			if ($("[name=memberId]:checked").size() == 0) {
				alertError("请选择要取消的名单！");
				return false;
			}
			$.messager.confirm('提示','确认要取消么?',function(r) {
				if (r) {
					$("#hide_loading").show();
					$.ajax({
						cache : false,
						type : "post",
						dataType : "json",
						url : "${basePath}crm/cancelBlack.shtml",
						data : $("#frmBlack").serialize(),
						error : function(XMLHttpRequest) {
							ajaxError(XMLHttpRequest);
						},
						success : function(data) {
							if (data == "1") {
								searchBlack();
								alertInfo("取消成功");
							} else {
								alertError("取消失败！");
							}
							$("#hide_loading").hide();
						}
					});
				};
			});
		});
		
		
	});
</script>
</head>
<body class="bg">
	<div class="content m_auto">
		<div class="content_l mt10">
			<ul>
				<li><a href="${basePath}filemanagement/listVip.shtml"><i class="nav_icon_b"></i><br>会员管理</a></li>
				<li><a href="${basePath }filemanagement/viewVistors.shtml?type=3"><i class="nav_icon_d"></i><br>访客管理</a></li>
				<li><a href="${basePath }filemanagement/listViewSingelTicket.shtml?type=2"><i class="nav_icon_a"></i><br>非会员管理</a></li>
				<li><a href="${basePath }parreserve/parReserveManages.shtml?indexflag="><i class="nav_icon_g"></i><br>预约管理</a></li>
            	<li><a href="${basePath}filemanagement/customer/serviceList.shtml"><i class="nav_icon_h"></i><br>客户服务</a></li>
				<li class="content_hover"><a href="${basePath}crm/jumpCrm.shtml"><i class="nav_icon_n"></i><br>客户关系管理</a></li>
			</ul>
		</div>
		<div class="content_r mt10">

			<div class="tab_normal m10">
				<ul id="tab_a" class=" fixed">
					<li class="thistab_a">会员活跃度</li>
					<li>黑名单</li>
					<li>VIP</li>
					<li>客户统计</li>
				</ul>
				<ul id="tab_conbox_a" class="fixed">
					<!-- 会员活跃度 Start -->
					<li class="p10">
						<div class="file_single_dl f14 fixed">
							<form id="frmLiveness" action="searchLiveness.shtml">
							<dl style="overflow: hidden" class="fixed">
								<dd>
									<label>最近入场时间：</label>
									<input type="text" readonly class="Wdate iput_t w82" id="intimeFrom" name="intimeFrom"
									onClick="WdatePicker({isShowClear:false,readOnly:true,dateFmt:'yyyy/MM/dd',maxDate:'#F{$dp.$D(\'intimeTo\',{d:0}) || \'%y/%M/%d\'}'})">
									<span>至</span>
									<input type="text" readonly class="Wdate iput_t w82" id="intimeTo" name="intimeTo"
									onClick="WdatePicker({isShowClear:false,readOnly:true,dateFmt:'yyyy/MM/dd',minDate:'#F{$dp.$D(\'intimeFrom\',{d:0})}', maxDate:'%y/%M/%d'})">
								</dd>
								<dd>
									<label>是否活跃：</label>
									<div class="uboxstyle">
										<select id="selLiveness" name="liveness">
											<option value="1" selected>是</option>
											<option value="0">否</option>
										</select>
									</div>
								</dd>
								<dd>
									<label>所属门店：</label>
									<div class="uboxstyle">
										<select id="selBranch" name="branchId">
											<c:forEach items="${branchs}" var="branch">
											<option value="${branch.pkBranId }">${branch.branName }</option>
											</c:forEach>
										</select>
									</div>
								</dd>
								<dd class="fr">
									<input type="hidden" name="pageNo" value="1">
									<input type="hidden" name="pageSize" value="10">
									<label></label><input type="button" value="查询" class="btn fr" id="btnSearchLiveness">
								</dd>
							</dl>
							</form>
						</div>

						<table class="table" id="tbl1">
							<tr>
								<th>会员</th>
								<th>是否活跃</th>
								<th>最近入场时间</th>
								<th>会员状态</th>
								<th>姓名</th>
								<th>性别</th>
								<th>年龄</th>
								<th>国籍</th>
								<th>VIP</th>
								<th>会员类型</th>
								<th>有效期限</th>
							</tr>
						</table>
						<div class="page fr m10" id="foot1"></div>
					</li>
					<!-- 会员活跃度 End -->
					<!-- 黑名单 Start -->
					<li class="p10">
						<div class="file_single_dl f14 fixed">
							<form id="frmBlackList" action="searchBlackList.shtml">
								<dl style="overflow: hidden" class="fixed">
									<dd>
										<label>姓名\电话\邮箱：</label><input type="text" id="blackCondition" name="condition" class="iput_t w200">
									</dd>
									<dd>
										<label>所属门店：</label>
										<div class="uboxstyle">
											<select id="selBranch2" name="branchId">
												<c:forEach items="${branchs}" var="branch">
												<option value="${branch.pkBranId }">${branch.branName }</option>
												</c:forEach>
											</select>
										</div>
									</dd>
									<dd>
										<input type="hidden" name="pageNo" value="1">
										<input type="hidden" name="pageSize" value="10">
										<input type="button" value="查询" id="btnSearchBlack" class="btn ml10">
										<input type="button" value="取消黑名单" id="btnCancelBlack" class="btn ml10">
									</dd>
								</dl>
							</form>
						</div>
						<form id="frmBlack">
							<table class="table mt10" id="tbl2">
								<tr>
									<th><label><input type="checkbox" class="mr5" id="chkAll">选择</label></th>
									<th>会员</th>
									<th>姓名</th>
									<th>是否会员</th>
									<th>性别</th>
									<th>年龄</th>
									<th>国籍</th>
									<th>VIP</th>
									<th>设置时间</th>
									<th>设置人</th>
									<th>原因</th>
								</tr>
							</table>
						</form>
						<div class="page fr m10" id="foot2"></div>
					</li>
					<!-- 黑名单 End -->
					<!-- VIP Start -->
					<li class="p10">
						<div class="file_single_dl f14 fixed">
							<form id="frmVip" action="searchVip.shtml">
								<dl style="overflow: hidden" class="fixed">
									<dd>
										<label>姓名\电话\邮箱：</label><input type="text" class="iput_t w200" name="condition">
									</dd>
									<dd>
										<label>所属门店：</label>
										<div class="uboxstyle">
											<select id="selBranch3" name="branchId">
												<c:forEach items="${branchs}" var="branch">
												<option value="${branch.pkBranId }">${branch.branName }</option>
												</c:forEach>
											</select>
										</div>
									</dd>
									<dd>
										<input type="hidden" name="pageNo" value="1">
										<input type="hidden" name="pageSize" value="10">
										<input type="button" value="查询" class="btn ml10" id="btnSearchVip">
									</dd>
								</dl>
							</form>
						</div>
						<table class="table" id="tbl3">
							<tbody>
								<tr>
									<th>会员</th>
									<th>会员状态</th>
									<th>姓名</th>
									<th>性别</th>
									<th>年龄</th>
									<th>国籍</th>
									<th>VIP</th>
									<th>会员类型</th>
									<th>有效期限</th>
								</tr>
							</tbody>
						</table>
						<div class="page fr m10" id="foot3"></div>
					</li>
					<!-- VIP End -->
					<!-- 客户统计 Start -->
					<li class="p10">
						<div>
							<div class="file_single_dl f14 fixed">
								<form id="frmTotal">
								<dl style="overflow: hidden" class="fixed">
									<dd>
										<label>维度选择：</label>
										<span><input type="checkbox" class="mr5" id="chkCountry" name="chkCountry" value="1" onclick="searchTotal();">国籍</span>
										<span class="ml10"><input type="checkbox" class="mr5" id="chkAge" name="chkAge" value="1" onclick="searchTotal();">年龄</span>
										<span class="ml10"><input type="checkbox" class="mr5" id="chkSex" name="chkSex" value="1" onclick="searchTotal();">性别</span>
									</dd>
									<dd>
										<label>所属门店：</label>
										<div class="uboxstyle">
											<select id="selBranch4" name="branchId">
												<c:forEach items="${branchs}" var="branch">
												<option value="${branch.pkBranId }">${branch.branName }</option>
												</c:forEach>
											</select>
										</div>
									</dd>
									<dd>
										
										<input type="button" value="查询" id="btnSearchTotal" class="btn ml10">
									</dd>
								</dl>
								</form>
							</div>
							<div>
								<span style="width: 40%">
									<table style="width: 40%; float: left;" class="table m10" id="tbl4">
										<tbody>
											<tr>
												<th>国籍</th>
												<th>年龄</th>
												<th>性别</th>
												<th>会员数量</th>
												<th>百分比</th>
											</tr>
										</tbody>
									</table>
								</span> 
								<span style="width: 60%;margin:0px 0 0 20px;text-align:center">
									<div  id="chartdiv" style=""></div>
								</span>
							</div>
						</div>
					</li>
					<!-- 客户统计 Start -->
				</ul>
			</div>

		</div><div id="hide_loading">
			<div class="loading"></div>    
			<div class="loading_bg"></div>	 
		</div>

	</div>
</body>
</html>

